<template>
  <el-form :model="models" :rules="rules" ref="qmGenForm" label-width="100px" class="qm-gen-form">
    <el-tabs>
      <el-tab-pane label="基本信息">
        <el-row>
          <el-col :span="12">
            <el-form-item label="作业类型：" prop="model.jobType">
              <el-select v-model="models.model.jobType" :disabled="controlData.isEdit">
                <el-option
                  v-for="option in controlData.jobTypeOptions"
                  :key="option.value"
                  v-bind:value="option.value"
                >{{ option.key }}</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作业名称：" prop="model.jobName">
              <el-input v-model="models.model.jobName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属分组：" prop="model.jobGroup">
              <el-input v-model="models.model.jobGroup"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用：" prop="model.isEnabled">
              <el-switch v-model="models.model.isEnabled"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="作业描述：" prop="model.memo">
              <el-input type="textarea" :rows="6" v-model="models.model.memo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane
        label="任务配置"
        v-if="controlData.isEdit && (models.model.jobType=='Sql' || models.model.jobType=='Jar')"
      >
        <el-row v-for="(arg) in models.params" :key="arg.parmId">
          <el-col v-if="arg.alias" :span="24">
            <el-form-item v-if="arg.name != 'sql'" :label="arg.alias + '：'">
              <el-input v-model="arg.value" :type="arg.name=='password' ? 'password' : 'text'"></el-input>
            </el-form-item>
            <el-form-item v-else :label="arg.alias + '：'">
              <el-input v-model="arg.value" :rows="6" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <template v-if="models.model.jobType != 'Sql'">
          <qm-file-upload
            :dataKey="models.model.jobId"
            :editable="pageAction != 'view'"
            title="上传Jar包"
            fileType=".jar"
          ></qm-file-upload>
        </template>
      </el-tab-pane>
      <el-tab-pane label="调度计划" v-if="controlData.isEdit">
        <el-row>
          <el-col :span="24">
            <el-radio v-model="models.model.triggerType" label="byDay">每天：</el-radio>
            <el-radio v-model="models.model.triggerType" label="byInterval">每隔：</el-radio>
            <el-radio v-model="models.model.triggerType" label="byCustom">自定义：</el-radio>
          </el-col>
          <el-col :span="24">
            <el-input v-model="models.model.triggerValue"></el-input>
            <span v-if="models.model.triggerType=='byDay'">每天定时执行，填写格式：18:30:00</span>
            <span v-if="models.model.triggerType=='byInterval'">
              每隔一段时间执行，填写格式：5m
              (s秒；m分；h小时；d天；M月)
            </span>
            <span v-if="models.model.triggerType=='byCustom'">指定时间执行，填写CRON表达式</span>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="参数显示" v-if="controlData.isEdit">
        <qm-table
          :data="{ data: models.params }"
          :showPager="false"
          :showOrder="false"
          :showCheckbox="false"
          menuType="text"
          :showView="false"
          :showEdit="false"
          keyProp="parmId"
          :menuOptions="{ width: '100px' }"
          :addFunc="addParam"
          :removeFunc="removeParam"
        >
          <qm-table-column field="name" width="150px">
            参数名
            <template v-slot:content="{ row }">
              <el-input v-model="row.name"></el-input>
            </template>
          </qm-table-column>
          <qm-table-column field="value">
            参数值
            <template v-slot:content="{ row }">
              <el-input v-model="row.value"></el-input>
            </template>
          </qm-table-column>
        </qm-table>
      </el-tab-pane>
    </el-tabs>
  </el-form>
</template>

<script>
import _ from "lodash";
import request from "@/utils/request";
import QmFileUpload from "@/libs/components/qm-file-upload";
export default {
  name: "schedule-dsJob-create",
  components: {
    QmFileUpload,
  },
  props: {
    models: Object,
    controlData: Object,
    pageAction: String,
  },
  data() {
    return {
      rules: {
        "model.jobName": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
        "model.jobType": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],

        "model.isEnabled": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    addParam() {
      let newModel = _.extend({}, this.controlData.blankParam);
      newModel.parmId = Math.uuid();
      this.models.params.push(newModel);
    },
    removeParam(rows) {
      _.each(rows, (arg) => {
        this.models.params.remove(arg);
      });
    },
  },
};
</script>

<style scoped>
</style>